<template>
  <div class="page-container">
    <div class="content-box">
      <!-- 标题 -->
      <h1 class="title">文本转漫画神器</h1>

      <div class="main-content">
        <!-- 左侧对话栏 -->
        <div class="chat-container">
          <div class="chat-header">对话记录</div>
          <div class="chat-messages" ref="chatMessages">
            <div v-if="messages.length === 0" class="empty-message">
              暂无对话记录
            </div>
            <div
              v-for="(message, index) in messages"
              :key="index"
              class="message-item"
              :class="message.role"
            >
              <div class="message-content">
                <div class="message-text">{{ message.content }}</div>
                <div class="message-time">{{ formatTime(message.timestamp) }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧输入区域 -->
        <div class="input-container">
          <!-- 文本输入区域 -->
          <textarea
            v-model="textContent"
            :maxlength="7000"
            placeholder="请输入小说正文，一次最多7000字"
            class="text-input"
            rows="12"
          ></textarea>

          <!-- 生成按钮 -->
          <button class="generate-btn" @click="handleGenerate" :disabled="loading">
            {{ loading ? '生成中...' : '开始生成' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sendChatRequest, retrieveChatStatus, getChatMessages } from '../api/agent.js';

export default {
  data() {
    return {
      textContent: '', // 存储文本框内容
      loading: false,  // 加载状态
      response: null,  // API响应结果
      messages: [],    // 对话消息列表
      pollingTimer: null // 轮询定时器
    };
  },
  methods: {
    async handleGenerate() {
      // 检查输入内容
      if (!this.textContent.trim()) {
        alert('请输入文本内容');
        return;
      }

      this.loading = true;

      // 添加用户消息到对话列表
      this.addMessage('user', this.textContent);

      try {
        // 移除所有换行符，将多行文本转换为单行
        const cleanedText = this.textContent.replace(/\r?\n/g, ' ').trim();

        const result = await sendChatRequest(cleanedText);
        this.response = result;

        console.log('API响应:', result);

        // 检查响应状态
        if (result.code === 0) {
          // 开始轮询检查状态
          this.startPolling(result.data.id, result.data.conversation_id);
        } else {
          alert(`请求失败: ${result.msg}`);
          this.loading = false;
        }

      } catch (error) {
        console.error('生成失败:', error);
        alert('生成失败，请检查网络连接或稍后重试');
        this.loading = false;
      }
    },

    // 开始轮询检查状态
    startPolling(chatId, conversationId) {
      this.pollingTimer = setInterval(async () => {
        try {
          const statusResult = await retrieveChatStatus(chatId, conversationId);
          console.log('状态检查:', statusResult);

          if (statusResult.code === 0 && statusResult.data.status === 'completed') {
            // 状态完成，停止轮询并获取消息
            clearInterval(this.pollingTimer);
            await this.fetchMessages(chatId, conversationId);
            this.loading = false;
          }
        } catch (error) {
          console.error('状态检查失败:', error);
          clearInterval(this.pollingTimer);
          this.loading = false;
        }
      }, 1000); // 每秒检查一次
    },

    // 获取对话消息
    async fetchMessages(chatId, conversationId) {
      try {
        const messagesResult = await getChatMessages(chatId, conversationId);
        console.log('消息结果:', messagesResult);

        if (messagesResult.code === 0) {
          // 打印所有消息的type，用于调试
          console.log('所有消息类型:', messagesResult.data.map(msg => ({ type: msg.type, role: msg.role })));

          // 找到type为answer的消息
          const answerMessage = messagesResult.data.find(msg => msg.type === 'answer');

          if (answerMessage) {
            console.log('找到answer消息:', answerMessage);

            // 解析消息内容，提取图片链接
            const formattedContent = this.formatMessageContent(answerMessage.content);
            this.addMessage('assistant', formattedContent);
          } else {
            console.warn('未找到type为answer的消息');
            // 如果没有找到answer类型的消息，查找其他可能的消息类型
            const assistantMessages = messagesResult.data.filter(msg => msg.role === 'assistant');
            console.log('所有assistant消息:', assistantMessages);

            // 尝试找到最后一个assistant消息
            if (assistantMessages.length > 0) {
              const lastAssistantMessage = assistantMessages[assistantMessages.length - 1];
              console.log('使用最后一个assistant消息:', lastAssistantMessage);

              // 解析消息内容，提取图片链接
              const formattedContent = this.formatMessageContent(lastAssistantMessage.content);
              this.addMessage('assistant', formattedContent);
            }
          }
        }
      } catch (error) {
        console.error('获取消息失败:', error);
      }
    },

    // 格式化消息内容，提取图片链接
    formatMessageContent(content) {
      try {
        // 尝试解析JSON内容
        const parsedContent = JSON.parse(content);

        // 检查是否有image数组（直接在根级别）
        if (parsedContent.image && Array.isArray(parsedContent.image)) {
          const imageLinks = parsedContent.image;

          if (imageLinks.length > 0) {
            let formattedMessage = '已为您生成漫画，请查收：\n';

            imageLinks.forEach((link, index) => {
              formattedMessage += `图片地址${index + 1}：${link}\n`;
            });

            return formattedMessage.trim();
          }
        }

        // 检查是否有x_aiplugin_extra_info字段
        if (parsedContent.x_aiplugin_extra_info) {
          try {
            // 解析x_aiplugin_extra_info中的JSON字符串
            const extraInfo = JSON.parse(parsedContent.x_aiplugin_extra_info);

            // 检查是否有image数组
            if (extraInfo.image && Array.isArray(extraInfo.image)) {
              const imageLinks = extraInfo.image;

              if (imageLinks.length > 0) {
                let formattedMessage = '已为您生成漫画，请查收：\n';

                imageLinks.forEach((link, index) => {
                  formattedMessage += `图片地址${index + 1}：${link}\n`;
                });

                return formattedMessage.trim();
              }
            }
          } catch (extraError) {
            console.log('解析x_aiplugin_extra_info失败:', extraError);
          }
        }

        // 检查是否有parameters.input字段（新的数据格式）
        if (parsedContent.parameters && parsedContent.parameters.input) {
          // 这种情况下，图片链接可能在其他地方，暂时返回提示信息
          return '文本已成功处理，正在生成漫画...';
        }

        // 如果没有找到image数组，返回原始内容
        return content;
      } catch (error) {
        // 如果不是JSON格式，直接返回原始内容
        console.log('内容不是JSON格式，返回原始内容');
        return content;
      }
    },

    // 添加消息到对话列表
    addMessage(role, content) {
      this.messages.push({
        role,
        content,
        timestamp: new Date()
      });

      // 滚动到底部
      this.$nextTick(() => {
        const chatMessages = this.$refs.chatMessages;
        if (chatMessages) {
          chatMessages.scrollTop = chatMessages.scrollHeight;
        }
      });
    },

    // 格式化时间
    formatTime(timestamp) {
      return timestamp.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit'
      });
    }
  },

  beforeUnmount() {
    // 组件销毁前清除定时器
    if (this.pollingTimer) {
      clearInterval(this.pollingTimer);
    }
  }
};
</script>

<style scoped>
/* 页面整体样式 */
.page-container {
  min-height: 100vh;
  background-color: #e6f2ff; /* 淡蓝色背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

/* 内容容器 - 确保整体居中 */
.content-box {
  width: 100%;
  max-width: 1200px; /* 增加最大宽度 */
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center; /* 子元素水平居中 */
}

/* 标题样式 */
.title {
  color: #3a7bd5;
  font-size: 28px;
  margin: 0 0 15px 0;
  text-align: center;
}

/* 主要内容区域 */
.main-content {
  display: flex;
  gap: 20px;
  width: 100%;
  height: 600px;
}

/* 左侧对话栏 */
.chat-container {
  flex: 1;
  background-color: #f8fbff;
  border: 1px solid #b3d1ff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  background-color: #6495ed;
  color: white;
  padding: 12px 16px;
  font-weight: 500;
  text-align: center;
}

.chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.empty-message {
  text-align: center;
  color: #999;
  font-style: italic;
  margin-top: 50px;
}

.message-item {
  display: flex;
  margin-bottom: 12px;
}

.message-item.user {
  justify-content: flex-end;
}

.message-item.assistant {
  justify-content: flex-start;
}

.message-content {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 12px;
  position: relative;
}

.message-item.user .message-content {
  background-color: #6495ed;
  color: white;
}

.message-item.assistant .message-content {
  background-color: #e8f4fd;
  color: #333;
  border: 1px solid #d1e7ff;
}

.message-text {
  word-wrap: break-word;
  line-height: 1.4;
}

.message-time {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 4px;
  text-align: right;
}

.message-item.assistant .message-time {
  text-align: left;
}

/* 右侧输入区域 */
.input-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 文本框样式 */
.text-input {
  width: 100%;
  padding: 20px;
  border: 1px solid #b3d1ff;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
  background-color: #f0f7ff;
  color: #333;
  box-shadow: 0 2px 8px rgba(100, 149, 237, 0.1);
  transition: all 0.3s ease;
  flex: 1;
}

/* 提示文字左上角显示 */
.text-input::placeholder {
  color: #a0c4ff; /* 浅色提示文字 */
  text-align: left; /* 左对齐 */
  line-height: normal; /* 恢复正常行高 */
}

.text-input:focus {
  outline: none;
  border-color: #6495ed;
  box-shadow: 0 0 0 3px rgba(100, 149, 237, 0.2);
}

/* 按钮样式 - 缩小尺寸 */
.generate-btn {
  padding: 12px 32px;
  background-color: #6495ed;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-end;
}

.generate-btn:hover {
  background-color: #4a80e2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(100, 149, 237, 0.3);
}

.generate-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(100, 149, 237, 0.2);
}

.generate-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.generate-btn:disabled:hover {
  background-color: #ccc;
  transform: none;
  box-shadow: none;
}
</style>